<template>
    <div class="process1">
        <router-link to="/big"> <img src="@/static/leftbtn.jpg" class="return" alt=""></router-link>
        <div class="body">
            <div class="leftbtn">
                <img src="@/static/leftbtn.jpg" alt="">
            </div>
            <div class="main">
                <processdetail1 v-if="step == 1 && topics[nowtopic]" @end="end"
                    :mymp3="`${config.imgTarget}/music/${topics[nowtopic].musicPath}`">
                </processdetail1>
                <processdetail2 @cando="cando" v-if="step == 2 && topics[nowtopic]"
                    :mymp3="`${config.voiceTarget}/sounds/${topics[nowtopic].studyText}.mp3`"
                    :img="`${config.imgTarget}/${topics[nowtopic].levelId}/${topics[nowtopic].imgPath}`">
                </processdetail2>
                <processdetail3 @cando="cando" v-if="step == 3 && topics[nowtopic]"
                    :videoPath="`${config.imgTarget}${topics[nowtopic].levelId}/${topics[nowtopic].videoPath}`">
                </processdetail3>
                <processwawrd @click="restart" v-if="step == 4"></processwawrd>
                <processerror @click="restart" v-if="step == 5"></processerror>
                <topictype2 v-if="step == 6 && topics[nowtopic]" @end="end" @correct="getcorrect"
                    :mymp3="`${config.voiceTarget}/sounds/${topics[nowtopic].quesText}.mp3`"
                    :img="`${config.imgTarget}/${topics[nowtopic].levelId}/${topics[nowtopic].imgPath}`"
                    :id="topics[nowtopic].id">
                </topictype2>
            </div>

            <div class="leftbtn" @click="leftbtn">
                <img src="@/static/rightbtn.jpg" alt="">
            </div>
        </div>
    </div>
</template>

<script setup>
import config from '../../config/config.js'
import topictype2 from '@/components/topictype2.vue';
import processdetail1 from '@/components/processdetail1.vue';
import processdetail2 from '@/components/processdetail2.vue';
import processdetail3 from '@/components/processdetail3.vue';
import processwawrd from '@/components/processaward.vue'
import processerror from '@/components/processerror.vue'
import api from '@/api/user'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { message } from 'ant-design-vue';
import { useAuthStore } from '../../store/index';
const store = useAuthStore();
const route = useRoute();
const router = useRouter();
const topics = ref([]);
//当前题目类型
const nowtopictye = ref();
//当前题目
const nowtopic = ref(0);
//本体进度
const step = ref(1);
const getcorrect = (x) => {
    topicorrect.value = x;
}
const icando = ref(false);
const cando = () => {
    icando.value = true
}
//获取题目
const end = () => {
    console.log(nowtopictye.value);
    if (nowtopictye.value == 1) {
        step.value++;
        if (step.value == 7) {
            step.value = 3;
        }
    } else {
        if (step.value == 1) {
            step.value = 6;
        } else if (step.value == 6) {
            if (!topicorrect.value) {
                step.value = 5;
            } else {
                step.value = 4;
            }
        }
    }

}
const restart = async () => {
    if (step.value == 5) {
        // nowtopic.value--;
        // store.setstudynum(++store.studynum);
    }else{
        store.setstudynum(1);
        store.setplaynum(0);
    }
    nowtopic.value++;
    if (nowtopic.value >= topics.value.length) {
        message.success({ content: '恭喜你完成了全部学习', duration: 2 });
        if (store.nowlevel == route.query.processnum) {
    
            await endstudy();
        }
        setTimeout(() => {
            router.push({
                name: "smallcontroller",
                query: {
                    number: route.query.processnum % 8 != 0 ? Math.floor(route.query.processnum / 8) : route.query.processnum / 8 - 1
                }
            })
        }, 2000);

    } else {
        step.value = 1;
        nowtopictye.value = topics.value[nowtopic.value].studyId
    }
}
const endstudy = async () => {
    try {
        return new Promise((reslove) => {
            api.putprocess({
                "remainingLevels": 1
            }).then((res) => {
                console.log(res);
                reslove(1);
            })
        })
    } catch (error) {

    }

}
const topicorrect = ref(0);
const leftbtn = () => {
    if (icando.value) {
        icando.value = false;
        if (step.value == 2) {
            step.value = 6;
        }
        if (step.value == 3) {
            if (!topicorrect.value) {
                step.value = 5;
            } else {
                step.value = 4;
            }

        }
    }

}

onMounted(() => {
    store.setstudynum(1);
    store.setplaynum(0);
    console.log(store.nowlevel);
    step.value = 1;
    console.log(route.query.processnum);
    api.getstudyId({
        levelId: route.query.processnum
    })
        .then((res) => {
            console.log(res);
            topics.value = res.data;
            nowtopic.value = 0
            nowtopictye.value = res.data[0].studyId;
            console.log(nowtopic.value);
        })
})
</script>

<style lang="scss" scoped>
.process1 {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-image: url('@/static/processback.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    .return {
        position: absolute;
        left: 3rem;
        top: 3rem;
        height: 4rem;
    }

    .body {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10rem;
    }

    .main {}
}
</style>
